<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-活动列表(用户)</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
    <script src="/static/js/moment.js"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="/static/vue/components/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/static/vue/components/ueditor/ueditor.all.js"></script>
    <script src="/static/vue/components/ueditorTemplate.js"></script>
</head>
<style>
    *{
        font-size: 14px
    }
    [v-cloak] {
        display: none;
    }
    .donation:hover{
        color:#409EFF;
        text-decoration:underline;
        cursor: pointer;
    }
    .active{
        color:#409EFF;
        text-decoration:underline;
    }

    .can-click:hover{
        color:#409EFF;
        cursor:pointer !important;
        text-decoration:underline;
    }

    .edui-toolbar{
        display:none !important;;
    }
    .activity-small-title{
        background: #cac6c5;
        height: 40px;
        line-height: 40px;
        font-size:14px;
        color: black;
        font-weight: bold;
    }

</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mb-9">
        <span class="ml-2 mt-4">活动类型</span>
        <el-select  v-model="queryParam.type" placeholder="请选择活动类型" size="small" filterable style="width:150px;" clearable class="mt-4 ml-2">
            <el-option
                    v-for="item in activityTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>

        <span class="ml-2 mt-4">活动品牌</span>
        <el-select v-model="queryParam.activityBrand" placeholder="请选择活动品牌" size="small" filterable style="width:200px;" clearable class="mt-4 ml-2" >
            <el-option
                    v-for="item in activityBrandOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <span class="ml-2 mt-4">活动对象</span>
        <el-select v-model="queryParam.activityTargetObject" placeholder="请选择活动对象" size="small" filterable style="width:200px;" clearable class="mt-4 ml-2">
            <el-option
                    v-for="item in activityTargetObjectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <span class="ml-2 mt-4">活动地点</span>
        <el-select v-model="queryParam.activityLocation" placeholder="请选择活动地点" size="small" filterable style="width:200px;" clearable class="mt-4 ml-2">
            <el-option
                    v-for="item in activityLocationOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <span class="ml-2 mt-4">活动状态</span>
        <el-select v-model="queryParam.state" placeholder="请选择活动状态" size="small" filterable style="width:200px;" clearable class="mt-4 ml-2">
            <el-option label="发布中" value="1"></el-option>
            <el-option label="签到中" value="2"></el-option>
            <el-option label="进行中" value="3"></el-option>
            <el-option label="评分中" value="4"></el-option>
            <el-option label="已结束" value="5"></el-option>
        </el-select>
        <span class="ml-2 mt-4">活动名称</span>
        <el-input size="small" placeholder="请输入活动名称" style="width:200px;" class="mt-4 ml-2" v-model="queryParam.activityName"></el-input>
        <el-button size="small" type="primary" class="ml-2" @click="getTableDataMethod(true)">搜索</el-button>
    </div>
    <div class="df mb-6 ml-9 mr-9" v-for="(item,index) in tableData" :key="index" style="border-bottom: 1px dashed #aaa;">
        <div style="width: 104px;    height: 64px;">
            <img :src="'/book/getLocalSystemPic?filePath='+ item.posterUrl" @click="showActivityMethod(item)" alt="" style="cursor: pointer;" witdh="100%" height="100%">
        </div>
        <div class="mb-6">
            <h3 style="font-size:18px;" class="can-click" @click="showActivityMethod(item)">
                {{item.activityName}}
                <!--活动状态正常，并且有数据-->
                <el-tag type="success" v-if="(item.state == 1 || item.state==2 || item.state == 3) && item.activityApplyDetails!=null">已报名</el-tag>

            </h3>
            <span style="color:#aaaaaa;font-size:16px;">{{item.activityStartTime}}</span>
            <span style="color:#aaaaaa;font-size:16px;">~</span>
            <span style="color:#aaaaaa;font-size:16px;">{{item.activityEndTime}}</span>
        </div>
    </div>


    <el-pagination background layout="total,sizes,prev, pager, next" :total="tableDataPaging.total"
                   :page-sizes="[10, 20, 50]"
                   prev-text="上一页" next-text="下一页"
                   :page-size="tableDataPaging.pageSize"
                   :current-page="tableDataPaging.currentPage"
                   @current-change="tableDataPagingChange"
                   @prev-click="tableDataPagingChange" @next-click="tableDataPagingChange"
                   @size-change="tableDataPagingSizeChange"
                   style="float:right;margin-top: 40px;padding-bottom:50px;">
    </el-pagination>

    <el-dialog title="" :visible.sync="showActivityDialogVisible" width="1200px"  append-to-body	>
        <div>
            <div class="mt-8 ml-4">
                <div>
                    <span style="color: #333333;font-size: 16px;font-weight: bold;">{{currentOperationActivity.activityName}}</span>
                </div>


                <div v-if="currentOperationActivity.publishTime" class="activity-small-title mt-4">
                    <span class="ml-2">发布日期：</span>
                    <span>{{currentOperationActivity.publishTime}}</span>
                </div>

                <div class="activity-small-title mt-4">
                    <span  class="ml-2">状态：</span>
                    <span v-if="currentOperationActivity.state === 5">已结束</span>
                    <span v-if="currentOperationActivity.state === 1">发布</span>
                    <span v-if="currentOperationActivity.state === 6">待发布</span>
                    <span v-if="currentOperationActivity.state === 2">签到中</span>
                    <span v-if="currentOperationActivity.state === 3">进行中</span>
                    <span v-if="currentOperationActivity.state === 4">评分中</span>
                </div>

                <div class="activity-small-title mt-4" v-if="currentOperationActivity.applyStartTime">
                    <span class="ml-2">报名有效时间：</span>
                    <span >{{currentOperationActivity.applyStartTime}}</span>
                    <span class="ml-2">~</span>
                    <span class="ml-2">{{currentOperationActivity.applyEndTime}}</span>
                </div>

                <div class="activity-small-title mt-4" v-if="currentOperationActivity.signStartTime">
                    <span class="ml-2">签到起止时间：</span>
                    <span >{{currentOperationActivity.signStartTime}}</span>
                    <span class="ml-2">~</span>
                    <span class="ml-2">{{currentOperationActivity.signEndTime}}</span>
                </div>

                <div class="activity-small-title mt-4" v-if="currentOperationActivity.activityStartTime">
                    <span class="ml-2">活动起止时间：</span>
                    <span >{{currentOperationActivity.activityStartTime}}</span>
                    <span class="ml-2">~</span>
                    <span class="ml-2">{{currentOperationActivity.activityEndTime}}</span>
                </div>

                <div v-if="currentOperationActivity.activityLocationDesc" class="activity-small-title mt-4">
                    <span  class="ml-2">活动地点：</span>
                    <span>{{currentOperationActivity.activityLocationDesc}}</span>
                </div>

                <div v-if="currentOperationActivity.ageMin" class="activity-small-title mt-4">
                    <span  class="ml-2">报名年龄要求：</span>
                    <span>{{currentOperationActivity.ageMin}}</span>
                    <span v-if="currentOperationActivity.ageMin && currentOperationActivity.ageMin !=0 &&
currentOperationActivity.ageMax && currentOperationActivity.ageMax!=0">~</span>
                    <span v-if="currentOperationActivity.ageMax && currentOperationActivity.ageMax!=0 ">{{currentOperationActivity.ageMax}}</span>
                </div>

                <div v-if="currentOperationActivity.peopleNum && currentOperationActivity.peopleNum != 0 " class="activity-small-title mt-4">
                    <span  class="ml-2">活动总名额：</span>
                    <span>{{currentOperationActivity.peopleNum}}</span>
                </div>

                <ueditor-template ueditor-id="activityEditor" ref="activityEditorRef" :show-menus=false :show-expand-button="false" :show-full-screen="false">
                </ueditor-template>
            </div>
        </div>
        <div class="df-aic-jcc mt-9 mb-9">
<!--            {{currentOperationActivity}}-->
            <el-button size="small" class="ml-6" type="primary" v-if="(currentOperationActivity.state === 1 || currentOperationActivity.state === 3) && currentOperationActivity.canApply"
            @click="applyActivityMethod">报名</el-button>
            <el-button size="small" class="ml-6" @click="showActivityDialogVisible = false">取消</el-button>
        </div>
    </el-dialog>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                activityTypeOptions:[],
                activityBrandOptions:[],
                activityLocationOptions:[],
                activityTargetObjectOptions:[],
                queryParam : {
                    activityName:"",
                    activityStartTime:"",
                    type:"",
                    activityBrand:"",
                    activityTargetObject:"",
                    activityLocation:"",
                    state:"",
                },
                tableData : [],
                tableDataLoading : false,
                tableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                form:{

                },
                showActivityDialogTitle:'',
                showActivityDialogVisible:false,
                activityEditor:"",
                currentOperationActivity:{
                    activityName:""
                },


            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                that.setAllSelectOptions();
                that.getTableDataMethod();
            });
        },
        methods: {
            setAllSelectOptions(){
                let that = this;
                getDicTSysdicMethodEL("activity_type","activityTypeOptions",that);
                getDicTSysdicMethodEL("activity_brand","activityBrandOptions",that);
                getDicTSysdicMethodEL("activity_target_object","activityTargetObjectOptions",that);
                getDicTSysdicMethodEL("activity_location","activityLocationOptions",that);
            },

            tableDataPagingChange(val) {
                let that = this;
                that.tableDataPaging.currentPage = val;
                that.getTableDataMethod();
            },
            tableDataPagingSizeChange(val) {
                let that = this;
                that.tableDataPaging.pageSize = val;
                that.getTableDataMethod();
            },

            //获取表格的数据
            getTableDataMethod(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.tableDataPaging.currentPage = 1;
                }
                const {activityName,activityStartTime,type,activityBrand,activityTargetObject,activityLocation,state} = this.queryParam

                let queryData = {
                    activityName: $.trim(activityName),
                    activityStartTime: $.trim(activityStartTime),
                    type: type,
                    activityBrand: activityBrand,
                    activityTargetObject: activityTargetObject,
                    activityLocation: activityLocation,
                    state: state,
                    pageNum: this.tableDataPaging.currentPage,
                    pageSize: this.tableDataPaging.pageSize,
                }
                this.tableDataLoading = true;
                that.tableData = [];
                axios.post('/activity/getActivityUserList', queryData)
                    .then(result => {
                        let res = result.data;
                        this.tableDataLoading = false;
                        if (res.code === 0) {
                            that.tableData = res.data.list;
                            that.tableDataPaging.total = res.data.total;
                        }
                    }).catch(error => {
                    that.$message.error("error");
                    this.tableDataLoading = false
                })
            },

            //展示活动的弹窗的方法
            showActivityMethod(row){
                let that = this;
                that.showActivityDialogVisible = true;
                this.$nextTick(function () {
                    that.showActivityDialogTitle = row.activityName;
                    if(row){
                        let deepCopyRow = JSON.parse(JSON.stringify(row));
                        let now = moment().valueOf();
                        deepCopyRow.canApply = false;
                        //报名时间
                        if(deepCopyRow.applyStartTime){
                            let applyStartTime = moment(deepCopyRow.applyStartTime,'YYYY-MM-DD HH:mm:ss').valueOf();
                            let applyEndTime = moment(deepCopyRow.applyEndTime,'YYYY-MM-DD HH:mm:ss').valueOf();
                            if( applyStartTime <= now && now <= applyEndTime){
                                deepCopyRow.canApply = true;
                            }
                        }
                        that.currentOperationActivity = deepCopyRow;//深拷贝一下
                        setTimeout(function(){
                            that.$refs.activityEditorRef.setContent(deepCopyRow.content);
                        }, 800);
                    }
                });
            },

            //报名活动
            applyActivityMethod(){
                let that = this;
                if(!that.currentOperationActivity.id){
                    that.$message.error("找不到数据");
                    return;
                }
                requestApiTB("activity/applyActivity", {"activityId":that.currentOperationActivity.id}, 'POST', function (res) {
                    if (res.code === 0) {
                        alert("报名成功");
                        that.showActivityDialogVisible = false;
                    } else {
                        alert(res.msg);
                    }
                });
            },



        }
    })
</script>
</html>